
const _interopRequireDefault = require('@babel/runtime/helpers/interopRequireDefault');

exports.__esModule = true;
exports.default = void 0;

const _babelHelperVueJsxMergeProps = _interopRequireDefault(require('@vue/babel-helper-vue-jsx-merge-props'));

const _utils = require('../utils');

const _icon = _interopRequireDefault(require('../icon'));

const _createNamespace = (0, _utils.createNamespace)('image');
const createComponent = _createNamespace[0];
const bem = _createNamespace[1];

const _default = createComponent({
  props: {
    src: String,
    fit: String,
    alt: String,
    round: Boolean,
    width: [Number, String],
    height: [Number, String],
    radius: [Number, String],
    lazyLoad: Boolean,
    showError: {
      type: Boolean,
      default: true,
    },
    showLoading: {
      type: Boolean,
      default: true,
    },
    errorIcon: {
      type: String,
      default: 'warning-o',
    },
    loadingIcon: {
      type: String,
      default: 'photo-o',
    },
  },
  data: function data() {
    return {
      loading: true,
      error: false,
    };
  },
  watch: {
    src: function src() {
      this.loading = true;
      this.error = false;
    },
  },
  computed: {
    style: function style() {
      const style = {};

      if ((0, _utils.isDef)(this.width)) {
        style.width = (0, _utils.addUnit)(this.width);
      }

      if ((0, _utils.isDef)(this.height)) {
        style.height = (0, _utils.addUnit)(this.height);
      }

      if ((0, _utils.isDef)(this.radius)) {
        style.overflow = 'hidden';
        style.borderRadius = (0, _utils.addUnit)(this.radius);
      }

      return style;
    },
  },
  created: function created() {
    const { $Lazyload } = this;

    if ($Lazyload) {
      $Lazyload.$on('loaded', this.onLazyLoaded);
      $Lazyload.$on('error', this.onLazyLoadError);
    }
  },
  beforeDestroy: function beforeDestroy() {
    const { $Lazyload } = this;

    if ($Lazyload) {
      $Lazyload.$off('loaded', this.onLazyLoaded);
      $Lazyload.$off('error', this.onLazyLoadError);
    }
  },
  methods: {
    onLoad: function onLoad(event) {
      this.loading = false;
      this.$emit('load', event);
    },
    onLazyLoaded: function onLazyLoaded(_ref) {
      const { el } = _ref;

      if (el === this.$refs.image && this.loading) {
        this.onLoad();
      }
    },
    onLazyLoadError: function onLazyLoadError(_ref2) {
      const { el } = _ref2;

      if (el === this.$refs.image && !this.error) {
        this.onError();
      }
    },
    onError: function onError(event) {
      this.error = true;
      this.loading = false;
      this.$emit('error', event);
    },
    onClick: function onClick(event) {
      this.$emit('click', event);
    },
    genPlaceholder: function genPlaceholder() {
      const h = this.$createElement;

      if (this.loading && this.showLoading) {
        return h('div', {
          class: bem('loading'),
        }, [this.slots('loading') || h(_icon.default, {
          attrs: {
            name: this.loadingIcon,
          },
          class: bem('loading-icon'),
        })]);
      }

      if (this.error && this.showError) {
        return h('div', {
          class: bem('error'),
        }, [this.slots('error') || h(_icon.default, {
          attrs: {
            name: this.errorIcon,
          },
          class: bem('error-icon'),
        })]);
      }
    },
    genImage: function genImage() {
      const h = this.$createElement;
      const imgData = {
        class: bem('img'),
        attrs: {
          alt: this.alt,
        },
        style: {
          objectFit: this.fit,
        },
      };

      if (this.error) {
        return;
      }

      if (this.lazyLoad) {
        return h('img', (0, _babelHelperVueJsxMergeProps.default)([{
          ref: 'image',
          directives: [{
            name: 'lazy',
            value: this.src,
          }],
        }, imgData]));
      }

      return h('img', (0, _babelHelperVueJsxMergeProps.default)([{
        attrs: {
          src: this.src,
        },
        on: {
          load: this.onLoad,
          error: this.onError,
        },
      }, imgData]));
    },
  },
  render: function render() {
    const h = arguments[0];
    return h('div', {
      class: bem({
        round: this.round,
      }),
      style: this.style,
      on: {
        click: this.onClick,
      },
    }, [this.genImage(), this.genPlaceholder()]);
  },
});

exports.default = _default;
